import React,{Component} from "react";
import { connect } from "react-redux";
import {NavLink,Route} from 'react-router-dom';
import { fetchList} from "../actions/userlist";


class UserList extends Component {
    componentWillMount(){
        console.log(this.props)
        this.props.fetchList()
    }

  render() {
    // console.log('this.props',this.props);
    
    const { lists, fetchList} = this.props;
    // console.log(lists)
    var list=[];
    if(lists.docs){
      if(lists.docs.length<8){
          // console.log(lists.docs)
           for(let i=0;i<lists.docs.length;i++){
            list.unshift(
            <div id='usermsg' className='col-md-3	col-lg-3' key={i}> 
            <h4>{lists.docs[i].name}</h4>
            <p >地址：{lists.docs[i].city}</p>
            <p >性别：{lists.docs[i].gender}</p>
            <p >邮箱：{lists.docs[i].mail}</p>
            <span>兴趣爱好：{lists.docs[i].interest}</span>
            </div>)
           }
      
       }else{
           for(let i=lists.docs.length-1;i>lists.docs.length-9;i--){
            list.push(<div id='usermsg' className='col-md-3	col-lg-3' key={i}> 
            <h4>{lists.docs[i].name}</h4>
            <p >地址：{lists.docs[i].city}</p>
            <p >性别：{lists.docs[i].gender}</p>
            <p >邮箱：{lists.docs[i].mail}</p>
            <span>兴趣爱好：{lists.docs[i].interest}</span>
            </div>)
           }
       }
  }else{
   
  }
    return (
      <div>
      <h2>用户列表</h2>
        <div className='row'>
            {list}
            
            
        </div>
      </div>
    );
  }
}

const getValue = state => {
    // console.log(111,state);
    // console.log(state.news.lists)
    return {
      lists: state.users.lists,
    }
  };
export default connect(getValue, { fetchList})(UserList);